<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #FFF;
        }
        
        #annoyingAdvert {
            position: absolute;
            z-index: 2;
            display: none;
            width: 100px;
            background-color: #FFC;
            padding: 10px;
            margin: 10px;
            border: 5px solid yellow;
        }
        
        #closeBox {
            position: absolute;
            color: red;
            font-size: 1.5em;
            top: 0;
            right: 0;
        }
    </style>
</head>

<body>
    <div id="annoyingAdvert">
        This is an incredibly annoying ad of the type you might find on some web sites.
        <div id="closeBox">&otimes;</div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean lacus elit, volutpat vitae,egestas in, tristique ut, nibh. Donec congue lacinia magna. Duis tortor justo, dapibus vel, vulputate sed, mattis sit amet, leo. Cras purus quam, semper quis,
        dignissim id, hendrerit eget,ante. Nulla id lacus eget nulla bibendum venenatis. Duis faucibus adipiscing mauris. Integer augue. In vulputate purus eget enim. Nam odio eros, porta vitae, bibendum sit amet, iaculis nec, elit. Cras egestas scelerisque
        pede. Donec a tellus. Nullam consectetuer fringilla nunc.</p>
    <p>Nam varius metus congue ligula. In hac habitasse platea dictumst. In ut ipsum a pede rhoncus convallis.Sed at enim. Integer sed metus quis est egestas vestibulum. Quisque mattis tortor a lorem. Nam diam. Integer consequat lectus. Donec molestie elementum
        nisl. Donec ligula sapien,volutpat eget, dictum quis, mollis a, odio. Aliquam augue enim, gravida nec, tempor ac, interdum in, urna. Aliquam mauris. Duis massa urna, ultricies id, condimentum ac, gravida nec, dolor. Morbi et est quis enim gravida
        nonummy. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nisl quam, tincidunt ultrices, malesuada eget, posuere eu, lectus. Nulla a arcu. Sed consectetuer arcu et velit. Quisque dignissim risus vel
        elit.
    </p>
    <p>Nunc massa mauris, dictum id, suscipit non, accumsan et, lorem. Suspendisse non lorem quis dui rutrum vestibulum. Quisque mauris. Curabitur auctor nibh non enim. Praesent tempor aliquam ligula. Fusce eu purus. Vivamus ac enim eget urna pulvinar bibendum.
        Integer porttitor, augueet auctor volutpat, lectus dolor sagittis ipsum, sed posuere lacus pede eget wisi. Proin vel arcu ac velit porttitor pellentesque. Maecenas mattis velit scelerisque tellus. Cras eu tellus quis sapien malesuada porta. Nunc
        nulla. Nullam dapibus malesuada lorem. Duis eleifend rutrum tellus. In tempor tristique neque. Mauris rhoncus. Aliquam purus.</p>
    <p>Morbi felis quam, placerat sed, gravida a, bibendum a, mauris. Aliquam porta diam. Nam consequat feugiatdiam. Fusce luctus, felis ut gravida mattis, ante mi viverra sapien, a vestibulum tellus lectus ut massa. Duis placerat. Aliquam molestie tellus.
        Suspendisse potenti. Fusce aliquet tellus a lectus. Proin augue diam, sollicitudin eget, hendrerit non, semper at, arcu. Sed suscipit tincidunt nibh. Donec ullamcorper. Nullam faucibus euismod augue. Cras lacinia. Aenean scelerisque, lorem sed
        gravida varius, nunc tortor gravida odio, sed sollicitudin pede augueut metus. Maecenas condimentum ipsum et enim. Sed nulla. Ut neque elit, varius a, blandit quis, facilisis sed, velit. Suspendisse aliquam odio sed nibh.</p>
    <script>
        window.addEventListener("load", initAdEvt, false);

        function initAdEvt() {
            document.getElementById("annoyingAdvert").style.display = "block";
            document.getElementById("annoyingAdvert").addEventListener("mouseover", slide, false);
            document.getElementById("closeBox").addEventListener("click", function() {
                document.getElementById("annoyingAdvert").style.display = "none";
            }, false);
        }

        function slide() {
            if (nextPos() < document.body.clientWidth - 150) {
                document.getElementById("annoyingAdvert").style.left = nextPos() + "px";
                setTimeout(slide, 10);
            }

            function nextPos() {
                // offsetLeft 是只读的，也就是说，可以读它的值，但是不能修改它
                return document.getElementById("annoyingAdvert").offsetLeft + 1;
            }
        }
    </script>
</body>

</html>